iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

從零開始的寫web app 30天生活系列 第 10

Day 10 - JavaScript(1) : 變數與資料類型

  • 分享至 

  • xImage
  •  

前言

今天先介紹一下JavaScript的一些背景, 再說一下JavaScript的變數與資料類型。

JavaScript是一種Programming language, 無論是前端還是後端, 都能夠看到它的身影。 而JavaScript的演化過程, 絕對是比HTML精彩。

  • 1995年 - Netscape的LiveScript
  • 1996年 - Microsoft的JScript
  • 1997年 - 由ECMA標準化, 標準為ECMAScript language specification
  • 1998年 - ECMAScript 3
  • 2009年 - ECMAScript 5
  • 2015年 - 廣為人知的ECMAScript 6
  • ...

變數

在JavaScript中, 有2種方法可以幫助我們宣告變數: var跟let。

var num1 = 1;
let num2 = 2;

console.logo(num1); // 1
console.logo(num2); // 2

而2者有什麼不同呢? 其中一個分別就是Hoisting。使用var的時候, var的變數宣告會被移動到程式區塊的頂端, 而let則不會。

例如:

num = 6;
console.log(num + 7); // 13
var num;

會變成

var num; // 提升到頂端
num = 6;
console.log(num + 7); // 13

若使用let的話, 會有什麼效果呢?

num = 6;
console.log(num + 7); // error: Cannot access 'num' before initialization
let num; // 不會提升到頂端

正因為code的順序與實際運行有所不同, var盡可能就不用。

資料類型

JavaScript支援以下資料類型

  • number
    • 數值
    • 例如: 123, -3.14, 1e10
  • boolean
    • 真假值
    • 例如: true, false
  • string
    • 字串
    • 例如: 'hi', "hello", `good job`
  • symbol
    • 用於產生唯一值(unique value)
    • Symbol('123') === Symbol('123') // false
  • undefined
    • 未被定義
  • null
    • 空值
  • object
    • 資料的集合
    • 例如: {age: 10, name: 'Peter'}
  • array
    • 陣列
    • 例如: ['a', 'b', 'c']
  • function
    • 函數
    • 例如: function print() { console.log('hello'); }

資料類型看似簡單, 但也有幾個點要注意。

在Object中的undefined

undefined如果為Object中的某個值, 那麼, 其對應的键值應該被理解為未定義。

例如

{
  name: "Peter",
  age: undefined
}

應被理解為

{
  name: "Peter"
}

這2個Object雖然並不相等, 但對於其他不支援Undefined的Programming language來說, 如C#, 它們是一樣的, 所以, 這樣的理解有助我們日後與其他系統交流。

Array 跟 Object

如果我們巧妙的利用這兩個資料類型, 它們大多情況下都可以表達出一樣的資料。

const peter = [];
const mary = {};

peter.name = "Peter";
peter[999] = "text";

mary.name = "Mary";
mary[999] = "test";

那麼, 應該在什麼時候用Array或是Object, 又或者, 2者的分別是什麼?

  1. Array是iterable, Object則不是

若果要對資料進行Loop的話, 使用Array比較方便。

const people = ['Peter', 'Mary'];

for (const person of people) {
    console.log(person); // output: Peter...Mary
}

const peopleInObject = {0: 'Peter', 1: 'Mary'};

for (const person of Object.values(peopleInObject)) {
    console.log(person); // output: Peter...Mary
}
  1. Array的鍵會影響Array長度
const myArray = [];

myArray[999] = 10;

console.log(myArray.length); // 1000

for (const element of myArray) {
  // 這裡會Loop 1000次
}

結語

今天先到這裡, 明天說一下函數。


上一篇
Day 9 - HTML
系列文
從零開始的寫web app 30天生活10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言